<!-- 滑动切换选项卡演示(标准写法) -->
<template>
	<view class="">
		<!-- 使用z-paging-swiper为根节点可以免计算高度 -->
		<z-paging-swiper>
			<template #top>
				<view class="" style="background-color: #F8F8F8;">
					<fui-nav-bar title="签约记录" background="#F8F8F8" isFixed isOccupy  @leftClick="pageBack"></fui-nav-bar>
					<view class="u-p-20" style="background-color: #F8F8F8;">
<!-- 						<u-search :searchIconFlag="true" v-model="searchText" input-align="center" placeholder="采购商名称" height="70" 
						:border-color="'#FFBB1A'" :bg-color="'#F8F8F8'" 	:show-action="false" @change="reloadFn" @search="reloadFn"></u-search> -->
						<fui-search-bar isLeft searchText v-model="searchText" placeholder="采购商名称" :cancel="false"  background="#F8F8F8" inputBackground="#f0f0f0" paddingTb="0" paddingLr="0" radius="45"></fui-search-bar>
					</view>
					<fui-tabs :isSlider="false" :tabs="tabList" selectedColor="#333" @change="tabsChange" :current="current"></fui-tabs>
				</view>
			</template>
			
			
			<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
			<swiper class="swiper" :current="current" @animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
					<!-- 这里的swiper-list-item为demo中为演示用定义的组件，列表及分页代码在swiper-list-item组件内 -->
					<!-- 请注意，swiper-list-item非z-paging内置组件，在自己的项目中必须自己创建，若未创建则会报组件不存在的错误 -->
					<history-list v-if="reloadFlag" :keyWords="searchText"  :tabIndex="index" :value="item.value" :currentIndex="current"></history-list>
					
				</swiper-item>
			</swiper>
			
		</z-paging-swiper>
	</view>
	
</template>

<script>
	import HistoryList from './historyList.vue'
	export default {
		data() {
			return {
				searchText:'',
				tabList: [
					{
						name:'已生效',
						value:1
					},
					{
						name:'待审核',
						value:0
					},
					{
						name:'已拒绝',
						value:2
					},
					],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				reloadFlag:true,
				activeStyle:{
					fontWeight:'bold',
					fontSize:'32rpx',
				},
				inactiveStyle:{
					fontSize:'28rpx',
				}
			};
		},
		components:{
			HistoryList
		},
		onShow() {
			uni.$off('reloadSignList')//建议先销毁一次监听，再进行新的一次监听，否则会出现重复监听的现象
			let that = this;
			uni.$once('reloadSignList',function(data){
				that.reloadFlag = false;
				that.current = Number(data);
				that.reloadFlag = true;
			});
		},
		created() {
		},
		methods: {
			reloadFn(){
			},
			toPage() {
				uni.navigateBack();
			},
			//tabs通知swiper切换
			tabsChange(index) {
				this.current = index;
			},
			//swiper滑动结束
			animationfinish(e) {
				let current = e.detail.current;
				this.current = current;
			}
		}
	}
</script>

<style scoped lang="scss">
	.add-btn{
		width: 160rpx;
		height: 160rpx;
		background-color: #FFBB1A;
		position: fixed;
		right: 40rpx;
		bottom: 30rpx;
		z-index: 11;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow:  0rpx 0rpx 30rpx rgba(144,144,144,0.6);
	}
	.add-btn::after{
		content: '+';
		font-size: 80rpx;
		font-weight: bold;
		    width: 30px;
		    height: 30px;
		    line-height: 20px;
		    text-align: center;
	}
	.swiper {
		height: 100%;
	}
	
</style>
